<template>
  <div class="comment">
    <!-- this is Comment page -->
    <header class="header">
      <h1 class="title">发表评论</h1>
    </header>
    <textarea 
      name="" 
      id="" 
      cols="30" 
      rows="10" 
      class="content" 
      placeholder="请输入你评论的内容" 
      v-model="content"
    >
    <!-- 请输入你评论的内容 -->
    </textarea>
    <!-- block 独占一行 -->
    <van-button 
      type="danger" 
      block
      @click="postComment"
    >添加评论</van-button>
    <!-- 楼层评论 -->
    <ul class="comment-list">
      <li 
        v-for="(comment,index) in comments" :key="index"
      >
        <header class="list-header">
          <!-- <span>第{{++index}}楼</span> -->
          <span>第{{index+=1}}楼</span>
          <span>{{comment.user_name}}</span>
          <span>{{comment.add_time}}</span>
        </header>
        <p class="lsit-content">
          {{comment.content}}
        </p>
      </li>
    </ul>
    <!-- <van-button 
      type="danger" 
      block
      @click="getMore"
    >加载更多</van-button> -->
    <!-- <van-button 
      type="danger" 
      block
      @click="getMore"
    >{{hasMore?'没有更多了':'加载更多'}}</van-button> -->
    <van-button 
      type="danger" 
      block
      @click="getMore"
    >{{moreText}}</van-button>
  </div>
</template>
<script>
export default {
  props: ['id'],
  data: () => ({
    page: 1,
    pageSize: 6,
    comments: [],
    // 设置一个布尔值
    hasMore: false,
    // content: '请输入你评论的内容'
    content: ''
  }),
  created() {
    // 获取评论信息
    this.getComments()
  },
  methods: {
    async getComments(){
      if(this.hasMore!==false) return;
      this.page++;
      try {
        // 优化axios的做法
        const {data:{message,count}} = await this.$http.getCommentsById({artid:this.id,page:this.page,pageSize:this.pageSize});
        // console.log(message);
        // this.comments = message;
        // 把上一页和下一页的数据拼接
        this.comments = this.comments.concat(message);
        console.log(count);
        // 计算布尔值 = 页码*每一页的条数 > 总条数
        this.hasMore = this.page * this.pageSize > count;
        // console.log(this.hasMore);
      } catch (error) {
        // 优化Toast
        this.$Toast(error.message)
      }
    },
    getMore(){
      this.getComments();
    },
    async postComment(){
      try {
        // 优化axios的做法
        const {data:message} = await this.$http.postCommentsById({id:this.id,content:this.content});
        // console.log(this.content);
        console.log(message);
        this.comments.unshift({
          "user_name": "匿名用户",
          "add_time": new Date().getTime(),
          "content": this.content
        })
        // 提交评论后，清空评论框里面的内容
        this.content = '';
      } catch (error) {
        // 优化Toast
        this.$Toast(error.message)
      }
    }
  },
  computed: {
      moreText(){
        return this.hasMore?'没有更多了':'加载更多';
      }
  }
}
</script>
<style lang="less" scoped>
  .comment {
    .header {
      border-bottom: 1px solid #ccc;
      .title {
        font-size: 20px;
      }
    }
    .content {
      width: 98%;
      margin-top: 10px;
    }
    .comment-list {
      .list-header {
        span {
          margin-right: 6px;
        }
      }
    }
  }
</style>